<template>
  <div class="select-inp box-border border border-gray-200 w-full h-full between~ rounded flex">
    <div class="flex-none center~ text-xs p-5px box-border">{{ prefix }}</div>
    <div class="w-80px h-full py-3px px-5px box-border flex items-center text-xs text-gray-300">
      {{ value }}
    </div>
    <div class="w-30px text-gray-300 cursor-pointer" @click="setActive">
      <div v-show="active" class="i-carbon-chevron-up"></div>
      <div v-show="!active" class="i-carbon-chevron-down"></div>
    </div>
    <div class="down-col w-200px h-100px bg-light-50 rounded overflow-y-scroll box-border" v-show="active">
      <div class="text-xs select-none text-dark-100 hover-bg-blue-100 p-5px box-border cursor-pointer"
           v-for="(option, index) of options"
           :key="index"
           @click="onSelect(option)"
      >
        {{ option }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useActive} from "@/hooks"

interface Props {
  prefix: string
  value: string
  options: string[]
}

const emits = defineEmits(["update:value"])
const rawProps = defineProps<Props>()
const {prefix, value, options} = toRefs(rawProps)
const selectedValue = ref(value.value)
const {active, setActive} = useActive(false)

function onSelect(option: string) {
  selectedValue.value = option
  emits("update:value", selectedValue.value)
  setActive()
}
</script>

<style scoped>
.select-inp {
  position: relative;
}

.down-col {
  right: 0;
  bottom: -110px;
  position: absolute;
  z-index: 999;
  box-shadow: 0 0 10px var(--gray);
}
</style>